簡介：本課程帶領(lǐng)大家使用JS和CSS3技術(shù)實現(xiàn)粽子動畫的效果，課程分為“分析動畫特效”和“開發(fā)”兩個部分，分析動畫部分使用“關(guān)鍵時間點逆向分析”的方法帶領(lǐng)大家把動畫制作過程揭秘出來，“開發(fā)”部分，首先對動畫效果進行深入剖析、然后再進行動畫的一步一步分步制作。
第1章 課程介紹及分析
本章節(jié)對效果進行了演示，以及使用了“關(guān)鍵時間點逆向分析”的方法帶領(lǐng)大家把動畫制作過程揭秘出來。
第2章 代碼實現(xiàn)
本章節(jié)先對靜態(tài)界面&元件概念進行講解，然后使用純 CSS 實現(xiàn)動畫和過渡動畫效果，以及腳本實現(xiàn)時間線類和構(gòu)建場景動畫，到最后完成粽子的旋轉(zhuǎn)動畫效果。
- 視頻： 2-1 開發(fā)環(huán)境介紹 (03:37)
- 視頻： 2-2 完成基本界面元素（一） (10:40)
- 視頻： 2-3 完成基本界面元素（二） (11:13)
- 視頻： 2-4 定義抖動的CSS動畫 (07:16)
- 視頻： 2-5 完成祝福語CSS過渡動畫 (08:37)
- 視頻： 2-6 動畫樣式（粽肉動畫） (17:11)
- 視頻： 2-7 動畫樣式（文字動畫） (08:26)
- 視頻： 2-8 動畫樣式定義（文字視角） (07:46)
- 視頻： 2-9 腳本編寫時間類構(gòu)造器 (10:38)
- 視頻： 2-10 用時間類編寫展開粽子動畫序列（一） (10:06)
- 視頻： 2-11 用時間類編寫展開粽子動畫序列（二） (04:20)
- 視頻： 2-12 實現(xiàn)托盤旋轉(zhuǎn)動畫 (15:45)
- 視頻： 2-13 圖片加載器解決閃動 (03:48)